<template>
  <div class="interfaceBtn">
    <DFPageList ref="dfPageListRef" :pageOptions="pageOptions">
      <template #btnJson>
        <json-editor-vue
          class="editor"
          v-model="btnJson"
          currentMode="code"
          :onChange="handleJsonChange(btnJson)"
        />
      </template>
    </DFPageList>
  </div>
</template>

<script lang="ts" setup name="InterfaceBtn">
  import lang from './lang';
  import { useMixins } from '@/hooks/useMixins';
  import {
    pageInterfaceBtn,
    addInterfaceBtn,
    updateInterfaceBtn,
    delInterfaceBtn,
  } from '@/api/gather/interfaceBtn';
  // import { listMachine } from '@/api/base/machine';
  // import { infoParamConfig } from '@/api/system/paramConfig';
  import JsonEditorVue from 'json-editor-vue3';
  // import { cloneDeep } from 'lodash-es';
  const { loadLangFn, t } = useMixins();
  loadLangFn(lang);

  const dfPageListRef: any = ref(null);

  // const machineList = ref([]);

  const btnJson = ref();

  const handleJsonChange = (e) => {
    dfPageListRef.value.setFieldsValueFn({ btnJson: e });
    if (e && Object.keys(e).length !== 0) {
      dfPageListRef.value?.validate(['btnJson']);
    }
  };

  // const interfaceJJ = ref()

  const pageOptions = {
    searchForm: {
      formSchemas: [
        {
          label: 'btnName',
        },
        {
          label: 'btnCode',
        },
      ],
    },
    table: {
      columns: [
        {
          width: 170,
          label: 'btnName',
        },
        {
          width: 170,
          label: 'btnCode',
        },
        {
          width: 170,
          label: 'remark',
          common: true,
        },
      ],
      action: {
        columns: [
          {
            label: 'edit',
          },
          {
            label: 'copy',
          },
          {
            label: 'delete',
          },
        ],
      },
      operaColumn: [
        {
          label: 'add',
        },
      ],
      requestFn: pageInterfaceBtn,
      delRequestFn: delInterfaceBtn,
    },
    modalFormDialog: {
      formSchemas: [
        {
          label: 'btnName',
          required: true,
          giProps: { span: 4 },
          span: 3,
        },
        {
          label: 'btnCode',
          required: true,
          giProps: { span: 4 },
          span: 3,
          editDialogDisabled: true,
        },
        {
          label: 'btnJson',
          slot: 'btnJson',
          maxlength: '999999999',
          required: true,
          giProps: { span: 4 },
          span: 3,
          rules: [
            {
              required: true,
              key: 'btnJson',
              validator(_rule, value: string) {
                if (!value || Object.keys(value).length === 0) {
                  return new Error(t('common.formTipMsg.input'));
                }
              },
              trigger: ['blur', 'change'],
            },
          ],
        },
        {
          label: 'remark',
          common: true,
          type: 'textarea',
          giProps: { span: 4 },
          span: 3,
        },
      ],
      cols: 2,
      addDataFn: addInterfaceBtn,
      updateDataFn: updateInterfaceBtn,
      setDialogDataFn: async (data, type) => {
        if (type === 'add') {
          btnJson.value = {};

          const newData: any = {};

          return newData;
        }

        if (type === 'copy') {
          delete data.id;
        }

        if (data && data.btnJson) btnJson.value = JSON.parse(data.btnJson);

        return data;
      },
      setDialogSubmitDataFn: (data) => {
        console.log('btnJson.value', btnJson.value);
        data.btnJson = JSON.stringify(btnJson.value) || null;
        return data;
      },
    },
  };
</script>

<style>
  .jsoneditor-poweredBy,
  .jsoneditor-transform,
  .jsoneditor-repair,
  .jsoneditor-sort {
    display: none;
  }
</style>
